<fieldset class="layui-elem-field layui-field-title">
  <legend>添加商品</legend>
</fieldset>

<style>
	#demo2 img{
		width: 92px;
		height: 92px;
	}
</style>

<style>
	#demo2 span{
			position: relative;
		}
		#demo2 span:hover::after{
			content: "X";
			display: block;
			background-color: #FF5722;
			width: 16px;
			height: 16px;
			border-radius: 16px;
			position: absolute;
			line-height: 16px;
			color: #fff;
			text-align: center;
			top: -46px;
			right: 0px;
		}
</style>

<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">一级分类</label>
		<div class="layui-input-inline">
			<select name="parent" lay-filter="parent"></select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">二级分类</label>
		<div class="layui-input-inline">
			<select name="goodsSortId">
				
			</select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品名称</label>
		<div class="layui-input-inline">
			<input type="text" name="name" class="layui-input" placeholder="请输入商品名" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品描述</label>
		<div class="layui-input-inline">
			<textarea name="dscp" class="layui-textarea" placeholder="请输入商品描述"></textarea>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品价格</label>
		<div class="layui-input-inline">
			<input type="number" name="price" class="layui-input" placeholder="请输入商品价格" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">版本</label>
		<div class="layui-input-inline">
			<input type="text" name="version" class="layui-input" placeholder="请输入商品版本" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品色彩</label>
		<div class="layui-input-inline">
			<input type="text" name="color" class="layui-input" placeholder="请输入商品色彩" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">套餐</label>
		<div class="layui-input-inline">
			<input type="text" name="suit" class="layui-input" placeholder="请输入商品型号" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">库存</label>
		<div class="layui-input-inline">
			<input type="number" name="count" class="layui-input" placeholder="请输入商品型号" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<input type="hidden" name="picture" />
		<label class="layui-form-label">商品图片</label>
		<div class="layui-input-block">
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
			  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			    预览图：
			    <div class="layui-upload-list" id="demo2"></div>
			 </blockquote>
			</div>
		</div>
	</div>
	
	
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-inline">
			<button type="submit" class="layui-btn" lay-submit lay-filter="add">添加</button>
		</div>
	</div>
</form>

<script type="text/javascript">
	layui.use(['form','upload','element'],function(){
		var form = layui.form;
		var upload = layui.upload;
		var element = layui.element;
		
		//获取当前token
		var token = getCookie("token");
		
		//获取一级分类
		$.ajax({
			// headers:{token:token},
			url:'http://localhost:9000/api/goodssorts',
			type:'get',
			data:{},
			dataType:'json',
			success:function(data){
				if(data.status == 200){
					var html = "<option value=''>请选择商品分类</option>";
					$.each(data.data.list,function(index,item){
						html +="<option value='"+item.id+"'>"+item.name+"</option>";
					});
					$("select[name='parent']").html(html);
					
					//表单渲染
					form.render();
				}else{
					layer.alert(data.msg);
				}
			},
			error:function(){}
		});
		
		//二级分类联动
		form.on('select(parent)',function(data){
			
			var parent = data.value;
			
			if (parent > 0) {
				//ajax获取二级分类
				$.ajax({
					// headers:{token:token},
					url:'http://localhost:9000/api/goodssorts',
					type:'get',
					data:{parent:parent},
					dataType:'json',
					success:function(data){
						if(data.status == 200){
							var html = "<option value='0'>请选择二级分类</option>";
							$.each(data.data.list,function(index,item){
								html +="<option value='"+item.id+"'>"+item.name+"</option>";
							});
							$("select[name='goodsSortId']").html(html);
							
							form.render();
						}else{
							layer.alert(data.msg);
						}
					},
					error:function(){}
				});
			} else{
				$("select[name='goodsSortId']").html("<option value=''>请选择二级分类</option>");
				form.render();
			}
		});
		
		upload.render({
		    elem: '#test2'
		    ,url: 'http://localhost:9000/upload' //此处配置你自己的上传接口即可
		    ,multiple: true
		    ,done: function(res){
		      //上传完毕//每上传一张图片，相应一次
			  $('#demo2').append('<span><img src="http://localhost:9000/upload/'+ res.data +'" class="layui-upload-img">'+
									'<input type="hidden" name="picture" value="'+res.data+'"></span>')
			  
			}
		  });
		  
		  //添加图片点击预处理事件
		  $("#demo2").on("click","span",function(){
			  $(this).remove();
		  });
		  
		
		form.on('submit(add)',function(data){
			//获取所有图片，组成一个数组
			var pictures=[];
			$("input[name='picture']").each(function(){
				pictures.push( {name:$(this).val()} );
			});
			
			//将数组放到data.field中
			data.field.pictures = pictures;
			  
		  $.ajax({
			  headers:{token:token},
			  url:'http://localhost:9000/api/goods',
			  type:'post',
			  data:JSON.stringify(data.field),
			  contentType:'application/json;charset=UTF-8',
			  dataType:'json',
			  success:function(data){
				  if(data.status == 201){
					  gotoUrl("goods/list.html");
				  }else{
					  layer.msg("添加失败");
				  }
			  },
			  error:function(){}
		  });
		  
		  return false;
		});
	});
</script>